import React,{useEffect} from 'react'
import { useNavigate } from 'react-router-dom';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input } from 'antd';
import styles from "./login.module.css"
import myAxios from "../../utils/myAixos"



export default function Login() {
  const navigate = useNavigate();
        
        
    const login=(values)=>{
      myAxios({
        url: "/login",
        method:"post",
        data:{
           user:values.username,
           password:values.password
        }

    }).then(res=>{
                 
            if(res.data.status===200){
              
              navigate("/HomePage")   
            }else{
               //跳转到404页面 
             
               
            }
             

    })
    }

  //提交表单
  const onFinish = (values) => {
          login(values)
           //每一个小时后重新获取token值，并且验证管理员的状态

         
           if(values.remember){
              localStorage.setItem("user",values.username)
              localStorage.setItem("password",values.password)
             
           }else{
                localStorage.removeItem("user")
                localStorage.removeItem("password")
           } 
          
    



  };

    useEffect(()=>{
      

    },[])
  

    
  return (
    <div style={{height:"100%"}} id={styles["box"]}>
     
     <div id={styles["login_img"]}>
         <div id={styles["top"]}>
            <img src={require("./login.jpg")} alt="" />
         </div>
       <div id={styles["from"]}>
       <h1 className={styles["h1"]}>健身管理系统</h1>
         <Form
      name="normal_login"
      initialValues={{
        remember: true,
        username:localStorage.getItem("user"),
        password:localStorage.getItem("password")
      }}
      onFinish={onFinish}
    >
      <Form.Item
        name="username"
        rules={[
          {
            required: true,
            message: '请输入你的账号!',
          },
        ]}
      >
        <Input   
        id={styles["user"]}
        prefix={<UserOutlined />} placeholder="账号"  />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: '请输入你的密码!',
          },
        ]}
      >
        <Input
        id={styles["password"]} 
          prefix={<LockOutlined />}
          type="password"
          placeholder="密码"
     
         
        />
      </Form.Item>
      <Form.Item>
        <Form.Item name="remember" valuePropName="checked" noStyle >
          <Checkbox  className={styles["checkBox"]} ><span>记住密码</span></Checkbox>
        </Form.Item>

      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" id={styles["login-form-button"]}>
         登录
        </Button>
    
      </Form.Item>
    </Form>
       </div>

     </div>
    </div>
  )
}
